 /*
 * @description: 轮播组件
 * @Author: along
 * @Date: 2020-09-08
 * @Last Modified by: along
 * @Last Modified time: 2020-09-09
 */
<template>
    <div
        class="lunbo lunboControl"
        @click="emitEvent(3)"
        v-if="isLoad"
        :style="{height: baseconfig.style.height / 2 + 'px'}"
    >
        <!-- 有数据 -->
        <div
            v-if="baseconfig.status && baseconfig.data.images.length > 0"
            class="slider"
            :style="{borderRadius: rate}"
        >
            <div
                v-if="baseconfig.data.images.length == 1"
                :style="{width: '375px', height: baseconfig.style.height / 2 + 'px', borderRadius: rate, backgroundImage: `url(${baseconfig.data.images[0].image_url})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center'}"
            />
            <el-carousel
                :autoplay="false"
                :height="baseconfig.style.height / 2 + 'px'"
                :style="{width: '375px', height: baseconfig.style.height / 2 + 'px', borderRadius: rate}"
                v-if="baseconfig.data.images.length > 1"
            >
                <el-carousel-item
                    v-for="(item,index) in baseconfig.data.images"
                    :key="index"
                    :style="{width: '375px', height: baseconfig.style.height / 2 + 'px', borderRadius: rate}"
                >
                    <div :style="{width: '375px', height: baseconfig.style.height / 2 + 'px', borderRadius: rate, backgroundImage: `url(${item.image_url})`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center'}"/>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 无数据 -->
        <div v-if="!baseconfig.status">
            <img
                src="@/assets/image/lunbo.png"
                class="lunbo-none-image"
            >
        </div>
    </div>
</template>

<script>
export default {
    name: 'Lunbo',
    props: {
        baseconfig: {
            type: Object,
            default: () => {}
        },
        index: {//存在多个相同组件,查询当前位置
            type: Number,
            default: () => {}
        }
    },
    data () {
        return {
            rate: '0px 0px 0px 0px',
            isLoad: false
        };
    },
    watch: {
        //圆角单位转换
        baseconfig:  {
            handler: function (val, oldVal) {
                let rateValue = val.style.borderRadius;

                this.rate = rateValue.replace(/rpx/g, 'px');
                this.isLoad = true;

                console.log('监听轮播数据修改', val);
            },
            deep: true
        }
    },
    filters: {},
    mounted () {
        this.isLoad = true;
        if(JSON.stringify(this.baseconfig.style) !== '{}') {//回填圆角
            let rateValue = this.baseconfig.style.borderRadius;

            this.rate = rateValue.replace(/rpx/g, 'px');
        }
    },
    methods: {
        /**
         * @description 点击组件，向上级传递点击类型
         */
        emitEvent (type) {
            this.$emit('emit', {
                type: type,//组件类型
                index: this.index//组件位置
            });
        }
    }
};
</script>

<style lang="less" scoped>
.lunbo {
    width: 375px;
    box-sizing: border-box;
    border: 1px #ffffff solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    // height: 190px;
    //无数据
    .lunbo-none-image {
        width: 355px;
        height: 170px;
    }
}
</style>
<style lang="less">
.lunboControl {
    .el-carousel__arrow--right, .el-carousel__arrow--left {
        display: none !important;
    }
    .el-carousel__button {
        width: 6px;
        height: 6px;
        border-radius: 50%;
    }
}
</style>